<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>

<!-- page specific plugin scripts -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="${ctx}/assets/js/ztree/js/jquery.ztree.core-3.5.js"></script> 
   <SCRIPT type="text/javascript">
var zTreeSelect, dTree;
var deptNodes = $.parseJSON('${deptNodes}');
var clickType='${clickType}';
var setting = {
	data: {
		simpleData: {
			enable: true
		}
	},
	view: {
		dblClickExpand: false
	},
	check: {
		enable: true
	},
	callback: {
		onClick: onClick
	} ,
	 async: {
		enable: true,
		url:"${ctx}/org/haveChildNodes",
		autoParam:["id","messageType","clickType"],
		type: "post",
		dataType: "json",
		dataFilter: filter
	}  
};
//异步加载子节点 	
function filter(treeId, parentNode, childNodes) {
	if(childNodes.length < 1) {
		dTree.removeChildNodes(parentNode);
	} else {
		return resultToNodes(childNodes);
	}
}
function onClick(event, treeId, treeNode, clickFlag) {
	if(clickType=="dept"&&treeNode.messageType=="dept"){
		$("#returnData").val("{deptId:'" + treeNode.id + "',deptName:'"+treeNode.name+"'}");
		$("#returnData").data("treeNode", treeNode);
	}else{
		return false;
	}
		$("#common_depttree_container").dialog("close");
}

//页面加载树结构
var scripts = [null, null];
    $('.page-content-area').ace_ajax('loadScripts', scripts, function() {
    $.fn.zTree.init($("#deptTree"), setting,resultToNodes(deptNodes));
    dTree = $.fn.zTree.getZTreeObj("deptTree");
});
    //分割子节点
    function resultToNodes(deptNodes){
      	var fNodes = [];
     		$.each(deptNodes,function(i,node){
     			fNodes.push(getNodes(node));
     		});
      	return fNodes;
    }
    var orgO = "${ctx}/assets/js/ztree/css/zTreeStyle/img/diy/org.png", 
    orgC = "${ctx}/assets/js/ztree/css/zTreeStyle/img/diy/org.png", 
    org = "${ctx}/assets/js/ztree/css/zTreeStyle/img/diy/org.png",
    dept = "${ctx}/assets/js/ztree/css/zTreeStyle/img/diy/dept.png";
    
    //设置子节点信息
      function getNodes(node){
      	var fNode = {
      		id: node.id, //节点编号
      		pId: node.pId, //父节点编号
      		name:node.text,//节点名称（在机构树上展示的名称）
      		open:node.isOpen==1?true:false, //是否打开子节点
      		messageType: node.nodeType, //节点属性（自定义），分org/dept
      		status:node.status, //状态，0-未启用 1-启用 2-停用
      		isParent: node.hasChild==1?true:false,//是否含有子节点
      		//type:node.type,//机构节点专用类型 1-机构 0-部门
      		checkType: "dept",//机构树类型 分org(只展示机构)/dept(展示机构、部门)/user(展示机构、部门、人员)
      		iconOpen: orgO, //节点图标
      		iconClose: orgC,//节点图标
      		icon: org // 节点图标
      	};
      	if(node.type == "item") {
     		fNode.iconOpen = dept;
     		fNode.iconClose = dept;
     		fNode.icon = dept; 
     	} 
      	
      	return fNode;
      }
//-->
</SCRIPT>
<!-- <style type="text/css">
div#rMenuSelect {
	font: 15px/21px Arial, Helvetica, simsun, sans-serif;
	color: #2f332a;
	font-size:100%;
	position:absolute; 
	visibility:hidden; 
	background-color: #555;
	padding: 2px;
}
div#rMenuSelect ul {
	margin: 0px;
	padding-left: 0px;
}
div#rMenuSelect ul li{
	margin: 1px 0;
	padding: 0 5px;
	cursor: pointer;
	list-style: none outside none;
	background-color: #DFDFDF;
}
</style> -->
<%-- <div id="bodySelect">
    <input type="hidden" name="treeMessage" id="treeMessage" value="${treeMessage}" />
    <input type="hidden" name="noLoad" id="noLoad" value="${noLoad}" />
    <input type="hidden" name="returnData" id="returnData" />
	<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" >
		<tr>
			<td height="100%" valign="top">
			<fieldset>
		<legend>部门信息</legend>
			<div class="zTreeDemoBackground left">
				<ul id="deptSelect" class="ztree" />
			</div>
			</td>
			</fieldset>
		</tr>
	    <div id="rMenuSelect">
			<ul>
				<li id="deleteChildNodes" onclick="deleteChildNodes();">取消全选</li>
			</ul>
		</div>
	</table>
</div>
</div>
 --%>
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
	<input type="hidden" name="returnData" id="returnData" />	
		<!-- #section:plugins/fuelux.treeview -->
		<div class="row">
			<div class="col-sm-12">
				<div class="widget-box widget-color-green2">				
					<div class="widget-header">
					<h4 class="widget-title lighter smaller">
					<hw:orgName orgId="${rootOrgId}" /></h4>
					</div>
					<div class="widget-body">
						<div class="widget-main padding-8">
							<ul id="deptTree" class="ztree"></ul>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div><!-- /.col -->

